<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<style type="text/css">
	.flex-box{ display: flex;  background: #666; margin-bottom: 20px;}
	.flex-box .flex-item{ width: 20%; background: blue;}
	.flex-box .flex-item1{ height: 80px;}
	.flex-box .flex-item2{ height: 100px;}
	.flex-box .flex-item3{ height: 110px;}
	.flex-box .flex-item4{ height: 40px;}
	</style>
	<style type="text/css">
	.flex-box1{ justify-content: flex-start;}
	.flex-box2{ justify-content: flex-end;}
	.flex-box3{ justify-content: center;}
	.flex-box4{ justify-content: space-between;}
	.flex-box5{ justify-content: space-around;}
	.flex-box6{ justify-content: space-evenly;}
	</style>
</head>
<body>
	<div>justify-content属性定义了项目在主轴上的对齐方式</div>
	<div>flex-start（默认值）：左对齐</div>
	<div class="flex-box flex-box1">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>flex-end：右对齐</div>
	<div class="flex-box flex-box2">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>center：居中</div>
	<div class="flex-box flex-box3">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>space-between:两端对齐，项目之间的间隔都相等</div>
	<div class="flex-box flex-box4">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</div>
	<div class="flex-box flex-box5">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>space-evenly:每个元素之间和元素距离边距的距离都相等</div>
	<div class="flex-box flex-box6">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	
</body>
</html>